<template>
   <div style="width: 70%; margin: auto">

     <el-button type="success" icon="el-icon-plus" @click="add">新增商品</el-button>

     <el-select v-model="goods.tid" @change="search">
       <el-option >全部</el-option>
       <el-option v-for="item in types" :label="item.tname" :value="item.tid"></el-option>
     </el-select>
     <el-button type="warning" icon="el-icon-delete" @click="del" :disabled="multipleSelection.length === 0">删除</el-button>
      <el-table
         :data="tableData.list"
         border
         stripe
         width="100%"
         @selection-change="handleSelectionChange"
        >
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            sortable
            label="商品编号"
            prop="gid"
        >
        </el-table-column>
        <el-table-column
             sortable
             label="商品名称"
             prop="gname"
        >
        </el-table-column>
        <el-table-column
            sortable
            label="商品价格"
            prop="price"
        >
        </el-table-column>

        <el-table-column
            sortable
            label="商品类别"
            prop="tname"
        >
        </el-table-column>
        <el-table-column
            sortable
            label="商品装"
        >
          <template #default="scope">
            {{ scope.row.status == 0 ? '销售' : scope.row.status == 1 ?  '缺货' : '下架' }}
          </template>
        </el-table-column>
      </el-table>

     <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="tableData.pageNum"
         :page-sizes="[2, 4, 6, 10]"
         :page-size="tableData.pageSize"
         layout="total, sizes, prev, pager, next, jumper"
         :total="tableData.total">
     </el-pagination>


     <el-dialog
         title="新增商品"
         :visible.sync="dialogVisible"
         width="30%"
         :before-close="handleClose">
           <span>
              <el-form>
                <el-form-item>
                   <el-input v-model="goods.gname" @blur="hasGname" placeholder="商品名称"></el-input>
                </el-form-item>
                 <el-form-item>
                   <el-input v-model="goods.price" placeholder="商品价格"></el-input>
                </el-form-item>
                <el-form-item>
                   <el-select v-model="goods.tid">
                      <el-option v-for="item in types" :label="item.tname" :value="item.tid"></el-option>
                   </el-select>
                </el-form-item>
              </el-form>
           </span>
           <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
     </el-dialog>

   </div>

</template>

<script>
import axios from "axios";

export default {
  name: "Goods",
  data(){
    return{
      tableData: [],
      dialogVisible: false,
      types: [],
      multipleSelection: [],
      goods: {
        status: 0
      }
    }
  },
  methods:{
    del(){
      this.$confirm('此操作将永久删除'+this.multipleSelection.length+'条数据。 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = '';
            this.multipleSelection.forEach(item =>{
               ids += item.gid+ ',';
            })
           axios.delete('goods/'+ids).then(resp=>{
               if(resp.data.flag){
                 this.$message({
                   type: 'success',
                   message: '删除成功!'
                 });
                  this.findGoods();
               }
           })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSizeChange(val){
      axios.get("goods/",{params:{pagesize:val}}).then(resp =>{
        this.tableData = resp.data.data;
      })
    },

    //全选的事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    handleCurrentChange(val){
      //改变当前页数
        axios.get("goods/",{params:{offset:val,pagesize: this.tableData.pageSize}}).then(resp =>{
             this.tableData = resp.data.data;
        })
    },

     search(){
        //alert(this.goods.tid);
       axios.get("goods/",{params:{tid:this.goods.tid}}).then(resp =>{
          if(resp.data.flag){
            this.tableData = resp.data.data;
          }
       })
     },
     hasGname(){
       alert(this.goods.gname);
        axios.get("goods/"+this.goods.gname).then(resp=>{
            if(resp.data.flag){
               this.$message.success(resp.data.message);
            }else{
               this.$message.error(resp.data.message);
            }
        })
     },
      add(){
         this.dialogVisible = true;

      },
    save(){
        axios.post("goods/",this.goods).then(resp =>{
          if(resp.data.flag){
            this.$message.success(resp.data.message);
            this.findGoods();
            this.goods = { }
            this.dialogVisible = false;
          }
        })
    },
      findTypes(){
         axios.get("goods/types").then(resp =>{
           this.types = resp.data.data;
         })
      },
      findGoods(){
         axios.get("goods/").then(resp =>{
           if(resp.data.flag){
              this.tableData = resp.data.data;
           }
         })
      },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    }

  },
  created() {
     this.findGoods();
    //获取类别集合
    this.findTypes();
  }
}
</script>

<style scoped>

</style>
